<template>
  <div id="userLoginView">
    <a-card id="card">
      <h1 style="text-align: center">注册</h1>
      <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
        <a-form-item field="userAccount" label="账号">
          <a-input v-model="form.userAccount" placeholder="请输入你的账号" />
        </a-form-item>
        <a-form-item field="userPassword" label="密码">
          <a-input-password
            v-model="form.userPassword"
            placeholder="请输入你的密码"
          />
        </a-form-item>
        <a-form-item field="checkPassword" label="确认密码">
          <a-input-password
            v-model="form.checkPassword"
            placeholder="请再次输入你的密码"
          />
        </a-form-item>
        <a-form-item>
          <a-button long><a href="/user/login">登录</a></a-button>
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit" long>注册</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>
<style scoped></style>
<script setup>
import { reactive } from "vue";
import { UserControllerService } from "@/service";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";

const router = useRouter();
const form = reactive({
  userAccount: undefined,
  userPassword: undefined,
  checkPassword: undefined,
});
const handleSubmit = async () => {
  const res = await UserControllerService.userRegistry(form);
  if (res.code === 0) {
    Message.info("注册成功");
    await router.push({
      path: "/user/login",
      replace: true,
    });
  } else {
    Message.info("注册失败：" + res.message);
  }
};
</script>
<style scoped>
a {
  text-decoration: none;
}

#userLoginView {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

#card {
  height: fit-content;
}
</style>
